<template>
  <div class="home">
    <div class="body">
      <div class="title">重量长度计算</div>
      <div class="cont">
        <div class="line">
          <div class="row">
            <div class="tit">厂家：</div>
            <el-select v-model="spell"
                       filterable
                       remote
                       reserve-keyword
                       placeholder="请输入关键词"
                       :remote-method="remoteMethod"
                       :loading="loading"
                       style="width:240px"
                       clearable
                       @change="changeCustomer">
              <el-option v-for="item in options"
                         :key="item.FlnkID"
                         :label="item.CustomerName"
                         :value="item.FlnkID">
              </el-option>
            </el-select>
          </div>
          <div class="row">
            <div class="tit">面料：</div>
            <el-select v-model="materiel" style="width:420px" @change="changeMateriel"  filterable
                       remote
                       reserve-keyword
                       placeholder="请输入关键词"
                       :remote-method="materielFilter"
                       :loading="loading">
              <el-option v-for="item in materielFilterList"
                         :key="item.FlnkID"
                         :label="item.MaterielsDetailCode + '/' + item.MaterielName + '/' + item.ColorConfigName + '/' + item.SpecConfigName"
                         :value="item.FlnkID"
                         ></el-option>
            </el-select>
          </div>
        </div>
        <div class="line">
          <div class="row">
            <div class="tit">物料名称：</div>
            <div class="des">{{materielInfo && materielInfo.MaterielName ? materielInfo.MaterielName : '--'}}</div>
          </div>
          <div class="row">
            <div class="tit">颜色：</div>
            <div class="des">{{materielInfo && materielInfo.ColorConfigName ? materielInfo.ColorConfigName : '--'}}</div>
          </div>
        </div>
        <div class="line">
          <div class="row">
            <div class="tit">门幅：</div>
            <div class="des"><el-input v-model="width"
                          ref="widthInput"
                          placeholder="请输入门幅"
                          style="width:200px"></el-input><div class="unit">cm</div></div>
          </div>
          <div class="row">
            <div class="tit">克重：</div>
            <div class="des">{{materielInfo && materielInfo.MaterielWeight ? materielInfo.MaterielWeight : '0'}}<div class="unit">g/m2</div></div>
          </div>
        </div>
        <div class="main">
          <div class="line">
            <div class="row" style="width:45%"
                 :style="{order:switchDiv ? 3 : 1}">
              <div class="tit">长度：</div>
              <div class="des">
                <el-input v-model="count"
                          ref="countInput"
                          placeholder="请输入长度"
                          style="width:200px"></el-input><div class="unit">m</div>
              </div>
            </div>
            <div class="trans" style="width:5%"
                 :class="switchDiv ? 'active' : ''"
                 @click="changeDiv()"><span class="el-icon-sort icon"
                    ref="trans"></span></div>
            <div class="row" style="width:45%"
                 :style="{order:switchDiv ? 1 : 3}">
              <div class="tit">重量：</div>
              <div class="des">
                <el-input v-model="weight"
                          ref="weightInput"
                          placeholder="请输入重量"
                          style="width:200px"></el-input>
                <div class="unit">g</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCustomerList } from '@/api/common'
import { GetMaterielsDetailByCustomer } from '@/api/tool'
export default {
  name: 'calcTrans',
  props: ['p1', 'p2'],
  data () {
    return {
      options: [],
      loading: false,
      switchDiv: false,
      count: '',
      weight: '',
      materielInfo: {},
      materielList: [],
      spell: '',
      materiel: '',
      materielFilterList: [],
      width: ''
    }
  },
  watch: {
    count (value) {
      if (!this.switchDiv) {
        this.weight = Number((this.materielInfo && this.materielInfo.MaterielWeight ? this.materielInfo.MaterielWeight : 0) * Number(this.width) * (value / 100)).toFixed(3)
      }
    },
    weight (value) {
      if (this.switchDiv) {
        this.count = Number(value / (this.materielInfo && this.materielInfo.MaterielWeight ? this.materielInfo.MaterielWeight : 0) / Number(this.width) * 100).toFixed(3)
      }
    },
    width (value) {
      if (!this.switchDiv) {
        this.weight = Number((this.materielInfo && this.materielInfo.MaterielWeight ? this.materielInfo.MaterielWeight : 0) * Number(value) * (this.count / 100)).toFixed(3)
      } else {
        this.count = Number(this.weight / (this.materielInfo && this.materielInfo.MaterielWeight ? this.materielInfo.MaterielWeight : 0) / Number(value) * 100).toFixed(3)
      }
    }
  },
  computed: {},
  components: {},
  methods: {
    changeDiv () {
      this.switchDiv = !this.switchDiv
    },
    remoteMethod (query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.options = this.customerList.filter((item) => {
            return (
              item.SimpleSpell.toLowerCase().indexOf(query.toLowerCase()) > -1
            )
          })
        }, 200)
      } else {
        this.options = this.customerList
      }
    },
    getCustomerList () {
      let vm = this
      let params = new FormData()
      params.append('Spell', vm.spell)
      params.append('BusinessScope', '')
      getCustomerList(params).then((response) => {
        if (response.data.result) {
          vm.customerList = response.data.data
          vm.options = response.data.data
        }
      })
    },
    changeMateriel () {
      this.materielInfo = this.materielList.filter((item) => {
        return item.FlnkID === this.materiel
      }) ? this.materielList.filter((item) => {
        return item.FlnkID === this.materiel
      })[0] : {}
      this.width = this.materielInfo && this.materielInfo.SpecConfigCode ? this.materielInfo.SpecConfigCode : 0
    },
    changeCustomer () {
      this.getMaterielsDetailByCustomer()
    },
    async getMaterielsDetailByCustomer () {
      let vm = this
      let params = {
        CustomerFlnkID: vm.spell,
        Type: 'M'
      }
      await GetMaterielsDetailByCustomer(params).then((response) => {
        if (response.data.result) {
          vm.materielList = response.data.data
          vm.materielFilterList = response.data.data
        }
      })
    },
    materielFilter (query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.materielFilterList = this.materielList.filter((item) => {
            return (
              item.MaterielsDetailCode.indexOf(query) > -1 || item.MaterielName.indexOf(query) > -1 || item.ColorConfigName.indexOf(query) > -1 || item.SpecConfigName.indexOf(query) > -1
            )
          })
        }, 200)
      } else {
        this.materielFilterList = this.materielList
      }
    },
    async getP () {
      if (this.p1 && this.p2) {
        this.spell = this.p1
        this.getCustomerList()
        await this.getMaterielsDetailByCustomer()
        this.materiel = this.p2
        this.changeMateriel()
      }
    }
  },
  mounted () {
    this.getCustomerList()
    this.getP()
  },
  beforeDestroy: function () {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '~@/css/tool/calcTrans.scss';
</style>
